﻿<script src="~/lib/vue/dist/vue.global.js"></script>
<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/dist/index.full.js"></script>
<script src="~/lib/axios/dist/axios.js"></script>
<div id="app">
	<table width="100%">
	<tr>
		<td>
			<p color="black">您正在做的业务是:人力资源--调动管理--调动登记查询</p>
		</td>
	</tr>
		<tr>
			<td align="right">
				<input type="button" value="提 交" v-on:click="Select()" class="BUTTON_STYLE1">
			</td>
		</tr>
	</table>
	<table width="100%" border="1" cellpadding=0 cellspacing=1
		   bordercolorlight=#848284 bordercolordark=#eeeeee
		   class="TABLE_STYLE1">
		<tr>
			<td width="10%" class="TD_STYLE1">
				I级机构
			</td>
			<td width="40%" class="TD_STYLE2">
				<el-select v-model="Dl.first"
						   placeholder="请选择"
						   size="large"
						   style="width: 240px">
					<el-option v-for="item in firstoptions"
							   :key="item.ffkId"
							   :label="item.firstKindName"
							   :value="item.firstKindName"
							   v-on:click="jly(item.firstKindId)" />
				</el-select>
			</td>

			<td width="10%" class="TD_STYLE1">
				II级机构
			</td>
			<td class="TD_STYLE2">
				<el-select v-model="Dl.second"
						   placeholder="请选择"
						   size="large"
						   style="width: 240px">
					<el-option v-for="item in secondoptions"
							   :key="item.fskId"
							   :label="item.secondKindName"
							   :value="item.secondKindName"
							   v-on:click="jle(item.secondKindId)" />
				</el-select>
			</td>
		</tr>
		<tr>
			<td class="TD_STYLE1">
				III级机构
			</td>
			<td class="TD_STYLE2">
				<el-select v-model="Dl.third"
						   placeholder="请选择"
						   size="large"
						   style="width: 240px">
					<el-option v-for="item in thirdoptions"
							   :key="item.ftkId"
							   :label="item.thirdKindName"
							   :value="item.thirdKindName" />
				</el-select>
			</td>
			<td class="TD_STYLE1">
				请输入建档时间
			</td>
			<td class="TD_STYLE2">
				<el-date-picker v-model="dateRange"
								type="daterange"
								range-separator="To"
								start-placeholder="Start date"
								end-placeholder="End date"
								:size="size"
								v-on:change="handleDateChange"
								 />
			</td>
		</tr>
		
	</table>



</div>

<script>
	const { createApp, ref, reactive, computed, watchEffect } = Vue;
	var app = createApp({
		setup() {
			const dateRange = ref([])
			const Dl = reactive({
				first: '',
				second: '',
				third:'',
				startDate: Date.startDate,
				endDate: Date.endDate
			})
			const firstoptions = ref("")
			const secondoptions = ref("")
			const thirdoptions = ref("")

			axios.get('/CFFK/GetCFFK')
				.then(res => {
					firstoptions.value = res.data
				})
			function jly(zhi) {
				console.log(zhi);
				axios.get(`/GetCFSKById/${zhi}`).then(response => {
					secondoptions.value = response.data;
				}).catch(error => {
					console.error('Error fetching data:', error);
				});
			}
			function jle(zhi) {
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.get('/GetCFTKById/' + zhi).then(response => {
					thirdoptions.value = response.data;
				}).catch(error => {
					console.error('Error fetching data:', error);
				});
			}
			const handleDateChange = (value) => {
				Dl.startDate = new Date(value[0]).toLocaleString('zh-CN', {
					year: 'numeric',
					month: 'numeric',
					day: 'numeric'
				});
				Dl.endDate = new Date(value[1]).toLocaleString('zh-CN', {
					year: 'numeric',
					month: 'numeric',
					day: 'numeric'
				});
				console.log('Start Date:', Dl.startDate)
				console.log('End Date:', Dl.endDate)
			}

			function Select() {
				const queryParams = new URLSearchParams();
				queryParams.set('mc', JSON.stringify(Dl));
				window.location.href = `/RegisterMC/Index1?${queryParams.toString()}`;
			}

			return {
				dateRange,
				Dl,
				firstoptions,
				secondoptions,
				thirdoptions,
				Select,
				handleDateChange,
				jly,
				jle
			}
		}
		
	})
	app.use(ElementPlus);
	app.mount("#app");
</script>
<style type="text/css">
	.TABLE_STYLE1 {
		border: 1px solid;
		border-color: #000000;
		border-collapse: collapse;
		width: 100%;
	}

	.TD_STYLE1 {
		background-color: #FFDB6F;
		
	}

	.TD_STYLE2 {
		border-spacing: 1px;
		background-color: #FFFFBB;
		border-color: #DEDBD6;
		border: 0;
	}

	BODY {
		background-color: #FFFFBB;
		border: 1px solid #FFDB6F;
		display: block;
		margin: 8px;
	}
	#tt{
		margin-top:5%;
	}
</style>